<template>
  <el-dialog
    title="异常详情"
    :visible.sync="dialogVisible"
    :modal="true"
    :appendToBody="true"
    width="80%"
    v-dialog-drag
    :close-on-click-modal="false"
    top="3vh"
    v-loading="saveloading"
    @close="handleClose()"
    @open="handleOpen()"
  >
    <el-collapse
      :value="[
        'base',
        'association',
        'history',
        'handleHistory',
        'handle',
        'record'
      ]"
    >
      <baseInfo :abnormalData="abnormalData" :mode="mode"/>
      <association :abnormalData="abnormalData"/>
      <history :abnormalData="abnormalData"/>
      <handleHistory :recordsList="recordsList" v-if='row && row.status != 1 && row.status != 4'/>
      <handleInfo  :row="row" :abnormalData="abnormalData" ref="handleInfo" v-if='mode == "operate"'/>
      <record :recordsList="recordsList" :abnormalData="abnormalData"/>
    </el-collapse>

    <div slot="footer" class="dialog-footer" v-if='mode == "operate"'>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleIgnore" plain v-if='row && row.status == 1'>忽略</el-button>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </div>
    <ignore-dialog
     :visible.sync="ignoreData.visible"
      :rows="ignoreData.row" @submit-success="updateList">
    </ignore-dialog>
  </el-dialog>
</template>
<script>
import { abnormalDetail,abnormalHandle} from "@/api/exceptionMgmt/abnormal";
import baseInfo from "../components/baseInfo";
import handleInfo from "../components/handleInfo";
import handleHistory from "../components/handleHistory";
import association from "../components/association";
import history from "../components/history";
import record from "../components/record";
import ignoreDialog from "../components/ignoreDialog";
export default {
  components: {baseInfo,handleInfo,association,history,record,handleHistory,ignoreDialog },
  props:{
    // mode:"operate",异常操作（处理，跟进）;"look",查看异常详情
    // status:1，待处理；2，进行中；3，已完成;4,已忽略，5,已关闭
    row:{
      type:Object,
      default:()=>{}
    },
    mode:{
      type:String,
      default:""
    },
    visible: {
      type: Boolean,
      default: false
    },
  },

  data() {
    return {
      saveloading: false,
      ignoreData:{
        visible:false,
        row:null
      },
      abnormalData:{},
      recordsList:[]
    };
  },

  computed: {
    dialogVisible: {
      set(val) {
        this.$emit("update:visible", val)
      },
      get() {
        return this.visible
      }
    }
  },

  methods: {
    handleClose() {
      this.saveloading = false;
      this.resetFormData()
    },

    handleOpen() {
      if (!this.row?.id && !this.row?.abnormalNo) {
        this.resetFormData();
        return
      }
      //上报下发异常数据关联的异常只有异常编码，没有id
      const parmas = this.row?.abnormalNo ?  {code:this.row.abnormalNo} : {id:this.row.id}
      abnormalDetail(parmas)
      .then(res=>{
        if (res.code == 200 && res.data) {
          this.abnormalData = res.data;
          this.abnormalData.status = this.row.status;
          this.abnormalData.handleDate = `${this.abnormalData.handleDay}天${this.abnormalData.handleHour}小时${this.abnormalData.handleMinute}分钟`;
          this.recordsList = res?.data?.records || [];
        } else {
         this.msgError(res.msg || "操作失败")
          this.resetFormData()
        }
      }).catch(() => {
        this.resetFormData()
      })
    },

    //忽略
    handleIgnore(){
      this.ignoreData.row = this.row ? [this.row] : [];
      this.ignoreData.visible = true;
    },

    // 提交
    handleSubmit(){
      const handleInfo = this.$refs["handleInfo"];
      handleInfo.$refs.ruleForm
      .validate((flag) => {
        if (flag) {
          const parmas = handleInfo.form;
          parmas.id = this.abnormalData.id;
          this.$confirm('确定提交本次异常处理结果？', "异常处理", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            abnormalHandle(parmas).then(res => {
              if (res.code == 200) {
                this.msgSuccess("操作成功")
                this.$emit("submit-success")
                this.dialogVisible = false
              } else {
                this.msgError(res.msg || "操作失败")
              }
              this.saveloading = false
            }).catch(() => {
              this.msgError("操作失败")
              this.saveloading = false
            })
          }).catch(() => {
          })
        }else {
          this.saveloading = false
        }
      })
    },

    updateList(){
      this.$emit("submit-success");
      this.$emit("update:visible", false)
      this.ignoreData.visible = false;
    },

    resetFormData() {
      const handleInfo = this.$refs["handleInfo"];
      if(handleInfo){
        handleInfo?.$refs?.ruleForm?.clearValidate();
        handleInfo.fileList = [];
        handleInfo.form = {
          itself:"",
          handleDes:"",
          abnormalDes:"",
          over:"",
          completeDate:'',
          fileIds:[]
        }
      }
      this.abnormalData  = {};
      this.recordsList = [];
    },
  },
};
</script>
<style lang="scss" scoped>
.top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.pagination-container {
  margin: 0;
}
.dialog-title-wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title{
    line-height: 1.5rem;
    font-size: 1.125rem;
    color: #303133;
  }
  .btn-wrap{
    padding-right: 30px;
    text-align: right;
  }
}
</style>
